<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="base"
      th:with="pageTitle='进度搜索'">
<head>
    <link rel="stylesheet" th:href="@{/css/index.css}">
    <style>
        .search-form {
            background-color: #fff;
            padding: 10px;
            line-height: 50px;
            height: 50px;
            margin: 15px 0;
            vertical-align: middle;
            text-align: left;
        }

        .bottonclass {
            margin-bottom: 15px;
        }

        .footer {
            bottom: 0;
        }

    </style>
</head>
<body>
<th:block layout:fragment="custom_content">
    <el-form :model="form" ref="form" :inline="true" label-width="100px" style="width: 980px" id="form"
             class="search-form"
             @submit.native.prevent>
        <el-form-item label="关键字" prop="keyword">
            <el-input @keyup.enter.native="search(1)" v-model="form.keyword" id="keyword" size="mini"
                      style="line-height: 50px;"></el-input>
        </el-form-item>

        <el-button size="mini" id="searchFile" type="primary" @click="search(1)">搜索</el-button>
    </el-form>

    <el-tabs v-model="activeName" @tab-click="handleClick">

        <el-tab-pane label="按标题搜索" name="first" stripe style="width: 1000px" id="searchdir">
            <!--<el-button class="bottonclass" size="mini" id="revert" type="primary" @click="revert()"-->
                       <!--style="margin-bottom: 20px">返回主目录-->
            <!--</el-button>-->
            <el-tree
                    :data="regulations"
                    node-key="id"
                    ref="tree"
                    @node-click="handleNodeClick"
                    :filter-node-method="filterNode"
                    default-expand-all
                    :expand-on-click-node="false" style="padding: 20px">
          <span class="custom-tree-node" slot-scope="scope">
            <span><i :class="scope.node.icon"></i>{{ scope.node.label }}</span>
          </span>
            </el-tree>

        </el-tab-pane>

        <el-tab-pane label="按内容搜索" name="second">
            <el-table :data="tableData" v-loading.body="loading" stripe style="width: 1000px" border cellspacing="0">
                <el-table-column>
                    <template slot-scope="scope">
                        <a :href="'/regulation/showregulation/'+scope.row.id"
                           @click=setId(scope.row.id)><label>标题：</label><label
                                v-html="scope.row.title"></label>
                            <!--<label style="margin-left: 10px">所在目录：</label> <label v-html="scope.row.url"></label>-->
                        </a>
                        <hr color="#F0F8FF">
                        <p v-html="scope.row.content"></p></template>
                </el-table-column>
            </el-table>

            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageNum"
                    layout="total, prev, pager, next"
                    :total="total">
            </el-pagination>

        </el-tab-pane>
    </el-tabs>
</th:block>
<th:block layout:fragment="javascript">
    <script th:src="@{/moment.js}"></script>
    <script>

        var indexVue = new Vue({
            el: '#app',
            data: function () {
                return {
                    siderWidthDialog: false,
                    siderbarWidth: 15,
                    regulations: [],
                    regulationscopy: [],
                    tableData: [],
                    pageNum: 0,
                    total: 0,
                    name:'',
                    loading: false,
                    pageSize: 10,
                    activeName: 'first',
                    form: {
                        keyword: ''
                    },
                    searchFlag: '',
                    breadcrumbs:['进度搜索'],
                    isCollapse: false,
                    defaultIndex: '-1',
                    menus: [],
                    regulationMenus: [],
                    deptTrees: []
                }
            },
            methods: {
                addHeight: function () {
                    var $this = this;
                    $this.$nextTick(function () {
                        changeFooterHeight();
                    })
                },
                handleNodeClick: function (node, data) {
                    var $this = this;
                    if (node.type == 0) {
                        var id = node.id;
                        var parentId = node.parentId;
                        $.ajax({
                            cache: true,
                            url: '/regulation/showtreebyparentid',
                            type: 'GET',
                            data: {id: id, parentId: parentId},
                            dataType: 'json',
                            contentType: 'application/json',
                            async: false,
                            success: function (data) {
                                if (data.status == 1) {
                                    indexVue.regulations = data.value.regulations;
                                    indexVue.addHeight();
                                }
                            }
                        });
                    } else {
                        var id = node.id;

                        $.ajax({
                            cache: true,
                            url: '/regulation/fileclickcount',
                            type: 'GET',
                            data: {id: id},
                            dataType: 'json',
                            contentType: 'application/json',
                            async: false,
                            success: function (data) {
                                location.href = "/regulation/detail/" + id;
                            }
                        });

                    }
                },
                filterChange: function () {
                    var $this = this;
                    // 这里每当输入的数据有变化就触发原生的过滤节点这个函数
                    indexVue.searchFlag = false;
                    this.$refs.tree.filter(form.keyword.value);
                    if (indexVue.searchFlag == false) {
                        indexVue.$alert('没有查到相关内容', '提示', {
                            confirmButtonText: '确定',
                            callback: function callback() {
                            }
                        });
                    }
                    // indexVue.changeFilter();
                    indexVue.addHeight();
                },
                revert: function () {
                    var $this = this;
                    $.ajax({
                        cache: true,
                        url: '/regulation/dirfiledata?newDate=' + Math.random(),
                        type: 'GET',
                        data: {},
                        dataType: 'json',
                        contentType: 'application/json',
                        async: false,
                        success: function (data) {
                            if (data.status == 1) {

                                indexVue.regulations = data.value.regulations;

                                $this.$nextTick(function () {
                                    changeFooterHeight();
                                })
                            }
                        }
                    });
                },
                filterNode: function (value, data) {
                    if (value == '') {
                        indexVue.searchFlag = true;
                    }
                    if (!value) return true;
                    var index = data.label.toUpperCase().indexOf(value.toUpperCase());

                    if (index >= 0) {
                        indexVue.searchFlag = true;
                        return index >= 0;
                    }

                },
                handleCurrentChange: function (val) {
                    this.search('${val}');
                },
                handleClick: function (tab, event) {
                    indexVue.name=tab['name'];
                    indexVue.addHeight();
                },
                setId: function (id) {
                    $.ajax({
                        cache: true,
                        url: '/regulation/fileclickcount',
                        type: 'GET',
                        data: {id: id},
                        dataType: 'json',
                        contentType: 'application/json',
                        async: false,
                        success: function (data) {

                        }
                    });
                    sessionStorage.setItem("id", id);
                },
                search: function (pageNum) {
                    var $this = this;

                    indexVue.regulations = indexVue.regulationscopy;

                    var name = indexVue.name;
                    if(name==undefined||name==''){
                        name="first";
                    }
                    if(name=="second"){
                        if (form.keyword.value == '') {
                            indexVue.$alert('请输入关键字！', '提示', {
                                confirmButtonText: '确定',
                                callback: function callback() {
                                }
                            });
                            return;
                        }

                        var condition = {};
                        condition['keyword'] = form.keyword.value;
                        condition['pageNum'] = indexVue.pageNum;
                        $.ajax({
                            cache: true,
                            url: '/regulation/regulationSel?newDate=' + Math.random(),
                            type: 'POST',
                            data: JSON.stringify(condition, "\t"),
                            dataType: 'json',
                            contentType: 'application/json',
                            async: false,
                            success: function (data) {
                                var pageInfo = data.value;
                                indexVue.tableData = pageInfo.list;
                                indexVue.pageNum = pageInfo.pageNum;
                                indexVue.total = pageInfo.total;
                                indexVue.addHeight();
                            }
                        });
                    }


                    if(name=="first"){
                        $this.$nextTick(function(){

                            indexVue.filterChange();

                            indexVue.addHeight();
                        });
                    }

                    // indexVue.addHeight();
                },
                initMenu: function () {
                    var $this = this;
                    var data = commonInitMenu($this);
                },
                toggleMenu: function () {
                    this.isCollapse = !this.isCollapse;
                    window.localStorage.setItem('isCollapse', this.isCollapse);
                },
                changeSiderWidth: function (value) {
                    changeSiderWidth(this, value);
                },
                openChangeSiderWidth: function () {
                    this.siderWidthDialog = true;
                }
            },
            created: function () {
                initCssProperty(this);
            }
        });
        $(function () {

            indexVue.initMenu();
            searchdata();
            changeFooterHeight();
        });

        function searchdata() {
            $.ajax({
                action: '',
                cache: true,
                url: '/regulation/dirfiledata?newDate=' + Math.random(),
                type: 'GET',
                data: {},
                dataType: 'json',
                contentType: 'application/json',
                async: true,
                success: function (data) {
                    if (data.status == 1) {

                        indexVue.regulationscopy = data.value.regulations;
                        indexVue.addHeight();
                    }
                }
            });
        }

        function html_decode(str) {
            var s = "";
            if (str.length == 0) return "";
            s = str.replace(/&amp;/g, "&");
            s = s.replace(/&lt;/g, "<");
            s = s.replace(/&gt;/g, ">");
            s = s.replace(/&nbsp;/g, " ");
            s = s.replace(/&#39;/g, "\'");
            s = s.replace(/&quot;/g, "\"");
            s = s.replace(/<br\/>/g, "\n");
            return s;
        }

    </script>
</th:block>
</body>
</html>